<template>
    <div class="page_root" :key="queryUpdateFlag" data-page-name="FAQ" data-page-identification="w_0t99ah6jy8">
        <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
            <!-- begin vid_jk7ozw00gq 自定义模板_r3pn8c4vso -->
            <!--           问题归类维护-->
            <a-modal
                centered
                :visible="state.classifyVisible"
                title="问题归类维护"
                width="800px"
                @ok="confirmClassFy"
                @cancel="cancalClassFy"
                :body-style="{ padding: '16px', height: '600px', overflowY: 'auto' }"
                :ok-button-props="{ loading: state.pzLoading }"
                destroy-on-close
                :maskClosable="false"
            >
                <div>
                    <a-form :model="state.questionList" ref="createRef">
                        <div class="module-item" v-for="(item, index) in state.questionList" :key="index">
                            <div class="form-content">
                                <a-row>
                                    <a-col :span="12">
                                        <a-form-item
                                            label="问题归类标题"
                                            :rules="[
                                                { required: true, message: '请输入问题归类标题！', trigger: 'blur' }
                                            ]"
                                            :name="[index, 'problemClassifyName']"
                                        >
                                            <a-input
                                                style="width: 100%"
                                                v-model:value="state.questionList[index].problemClassifyName"
                                            />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="12">
                                        <a-form-item
                                            label="问题归类序号"
                                            :rules="[
                                                { required: true, message: '请输入问题归类序号！', trigger: 'blur' }
                                            ]"
                                            :name="[index, 'problemClassifyNo']"
                                        >
                                            <a-input-number
                                                style="width: 100%"
                                                v-model:value="state.questionList[index].problemClassifyNo"
                                            />
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                            </div>

                            <a class="del" @click="handlerDeleteFormItem1(index)">删除</a>
                            <a class="add-btn" @click="handlerAddFormItem1(index, '下方')">下方插入</a>
                        </div>
                    </a-form>
                    <a-space>
                        <a-button type="primary" ghost @click="handlerAddFormItem1(index, '最后')"
                            ><template #icon><plus-outlined /></template>新增</a-button
                        >
                    </a-space>
                </div>
            </a-modal>
            <!--           问题归类维护-->
            <!--           新增-->
            <a-modal
                centered
                :visible="state.createVisible"
                :title="state.createTitle"
                width="800px"
                @ok="confirmQuestion"
                @cancel="cancalQuestion"
                :body-style="{ padding: '16px', height: '600px', overflowY: 'auto' }"
                :ok-button-props="{ loading: state.pzLoading }"
                destroy-on-close
                :maskClosable="false"
            >
                <div class="my-page">
                    <a-form :model="state.createList" ref="questionRef">
                        <div class="form-top">
                            <a-form-item
                                label="问题归类"
                                :rules="[{ required: false, message: '请选择问题归类' }]"
                                name="problemClassifyId"
                            >
                                <a-select
                                    :options="twoState.classFyList"
                                    v-model:value="state.createList.problemClassifyId"
                                    :field-names="{ label: 'label', value: 'value' }"
                                    :filter-option="
                                        (input, option) => {
                                            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                        }
                                    "
                                />
                            </a-form-item>
                            <a-form-item
                                label="出现问题"
                                :rules="[{ required: false, message: '请输入出现问题' }]"
                                name="problemHappensName"
                            >
                                <a-textarea
                                    v-model:value="state.createList.problemHappensName"
                                    placeholder="请输入出现问题"
                                />
                            </a-form-item>
                            <a-form-item
                                label="项目阶段"
                                :rules="[{ required: false, message: '请输入项目阶段' }]"
                                name="problemHappensStageList"
                            >
                                <!--a-textarea
                                    v-model:value="state.createList.problemHappensStage"
                                    placeholder="请输入项目阶段"
                                /-->
                                <a-select
                                    :options="taskList"
                                    mode="multiple"
                                    :field-names="{ label: 'label', value: 'value' }"
                                    v-model:value="state.createList.problemHappensStageList"
                                />
                            </a-form-item>
                        </div>
                        <div
                            class="bottom-item"
                            v-if="
                                state.createList.faqDeliveryFlowFormList &&
                                state.createList.faqDeliveryFlowFormList.length > 0
                            "
                        >
                            <div
                                class="module-item-two"
                                v-for="(item, index) in state.createList.faqDeliveryFlowFormList"
                                :key="index"
                            >
                                <div class="form-content">
                                    <a-row>
                                        <a-col :span="24">
                                            <a-form-item
                                                label="生产流程标签"
                                                :rules="[
                                                    {
                                                        required: false,
                                                        message: '请选择生产流程标签！',
                                                        trigger: 'blur'
                                                    }
                                                ]"
                                                :name="['faqDeliveryFlowFormList', index, 'flowLabel']"
                                            >
                                                <a-select
                                                    v-model:value="
                                                        state.createList.faqDeliveryFlowFormList[index].flowLabel
                                                    "
                                                    :options="[
                                                        {
                                                            label: '备料',
                                                            value: '备料'
                                                        },
                                                        {
                                                            label: '计量',
                                                            value: '计量'
                                                        },
                                                        {
                                                            label: '下料',
                                                            value: '下料'
                                                        },
                                                        {
                                                            label: '水泥磨',
                                                            value: '水泥磨'
                                                        },
                                                        {
                                                            label: '结果',
                                                            value: '结果'
                                                        },
                                                        {
                                                            label: '其他因素甲方',
                                                            value: '其他因素甲方'
                                                        },
                                                        {
                                                            label: '其他因素我方',
                                                            value: '其他因素我方'
                                                        }
                                                    ]"
                                                />
                                            </a-form-item>
                                        </a-col>
                                        <a-col :span="24">
                                            <a-form-item
                                                label="可能原因"
                                                :rules="[
                                                    { required: false, message: '请输入可能原因！', trigger: 'blur' }
                                                ]"
                                                :name="['faqDeliveryFlowFormList', index, 'flowReason']"
                                            >
                                                <a-textarea
                                                    style="width: 100%"
                                                    v-model:value="
                                                        state.createList.faqDeliveryFlowFormList[index].flowReason
                                                    "
                                                />
                                            </a-form-item>
                                        </a-col>
                                        <a-col :span="24">
                                            <a-form-item
                                                label="序号"
                                                :rules="[{ required: false, message: '请输入序号！', trigger: 'blur' }]"
                                                :name="['faqDeliveryFlowFormList', index, 'flowNo']"
                                            >
                                                <a-input
                                                    style="width: 100%"
                                                    v-model:value="
                                                        state.createList.faqDeliveryFlowFormList[index].flowNo
                                                    "
                                                />
                                            </a-form-item>
                                        </a-col>
                                        <a-col :span="24">
                                            <a-form-item
                                                label="解决方案"
                                                :rules="[
                                                    { required: false, message: '请输入解决方案！', trigger: 'blur' }
                                                ]"
                                                :name="['faqDeliveryFlowFormList', index, 'flowSolution']"
                                            >
                                                <a-textarea
                                                    style="width: 100%"
                                                    v-model:value="
                                                        state.createList.faqDeliveryFlowFormList[index].flowSolution
                                                    "
                                                />
                                            </a-form-item>
                                        </a-col>
                                        <a-col :span="24">
                                            <a-form-item
                                                label="主责方"
                                                :rules="[
                                                    { required: false, message: '请输入主责方！', trigger: 'blur' }
                                                ]"
                                                :name="['faqDeliveryFlowFormList', index, 'flowResponsibleParty']"
                                            >
                                                <a-input
                                                    style="width: 100%"
                                                    v-model:value="
                                                        state.createList.faqDeliveryFlowFormList[index]
                                                            .flowResponsibleParty
                                                    "
                                                />
                                            </a-form-item>
                                        </a-col>
                                        <a-col :span="24">
                                            <a-form-item
                                                label="主责部门"
                                                :rules="[
                                                    { required: false, message: '请输入主责部门！', trigger: 'blur' }
                                                ]"
                                                :name="['faqDeliveryFlowFormList', index, 'flowResponsibleDepartment']"
                                            >
                                                <a-input
                                                    style="width: 100%"
                                                    v-model:value="
                                                        state.createList.faqDeliveryFlowFormList[index]
                                                            .flowResponsibleDepartment
                                                    "
                                                />
                                            </a-form-item>
                                        </a-col>
                                        <a-col :span="24">
                                            <a-form-item
                                                label="典型案例"
                                                :rules="[
                                                    { required: false, message: '请输入典型案例！', trigger: 'blur' }
                                                ]"
                                                :name="['faqDeliveryFlowFormList', index, 'flowClassicCase']"
                                            >
                                                <a-input
                                                    style="width: 100%"
                                                    v-model:value="
                                                        state.createList.faqDeliveryFlowFormList[index].flowClassicCase
                                                    "
                                                />
                                            </a-form-item>
                                        </a-col>
                                    </a-row>
                                </div>

                                <a class="del" @click="handlerDeleteFormItem2(index)">删除</a>
                                <a class="add-btn" @click="handlerAddFormItem2(index, '下方')">下方插入</a>
                            </div>
                        </div>
                        <a-space>
                            <a-button type="primary" ghost @click="handlerAddFormItem2(index, '最后')"
                                ><template #icon><plus-outlined /></template>新增</a-button
                            >
                        </a-space>
                    </a-form>
                </div>
            </a-modal>
            <!--           新增-->
            <!--          新建关键点-->
            <a-modal
                v-model:visible="state.visible1"
                :title="state.modalTitle1"
                width="1200px"
                destroy-on-close
                centered
                :body-style="{
                    paddingBottom: 0
                }"
                @ok="handlerConfirm1"
            >
                <div class="one-form">
                    <a-form :model="state.keyPointForm" ref="batchForm">
                        <a-row :gutter="24">
                            <a-col :span="12">
                                <a-form-item label="第1步 备料">
                                    <a-textarea placeholder="请输入" v-model:value="state.keyPointForm.stockOne" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="">
                                    <a-textarea placeholder="请输入" v-model:value="state.keyPointForm.stockTwo" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="24">
                                <a-form-item label="第2步 计量">
                                    <a-textarea placeholder="请输入" v-model:value="state.keyPointForm.metering" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="24">
                                <a-form-item label="第3步 下料">
                                    <a-textarea placeholder="请输入" v-model:value="state.keyPointForm.cutting" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="24">
                                <a-form-item label="第4步 水泥磨">
                                    <a-textarea placeholder="请输入" v-model:value="state.keyPointForm.cementMill" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="第5步 结果">
                                    <a-textarea placeholder="请输入" v-model:value="state.keyPointForm.resultOne" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="">
                                    <a-textarea placeholder="请输入" v-model:value="state.keyPointForm.resultTwo" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="人为因素">
                                    <a-textarea
                                        placeholder="请输入"
                                        v-model:value="state.keyPointForm.humanFactorOne"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="">
                                    <a-textarea
                                        placeholder="请输入"
                                        v-model:value="state.keyPointForm.humanFactorTwo"
                                    />
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
            </a-modal>
            <!--          新建关键点-->
            <div class="kb-page">
                <a-tabs v-model:activeKey="activeKey" size="large" :tabBarGutter="24" @change="tabChange">
                    <a-tab-pane key="FAQ" tab="FAQ" />
                    <a-tab-pane key="水泥配料主要流程与要点" tab="水泥配料主要流程与要点" />
                    <a-tab-pane key="水泥配料项目交付端" tab="水泥配料项目交付端" />
                </a-tabs>
                <div v-if="activeKey === 'FAQ'">
                    <FaqItem />
                </div>
                <div class="template-title" v-if="activeKey === '水泥配料主要流程与要点'">
                    <div><span class="title-font">FAQ列表</span></div>
                    <div style="position: relative; top: -8px">
                        <!-- end vid_hwx83rvzpu 我的 -->
                        <!-- begin vid_eaymhbrupq 审批 -->
                        <a-space>
                            <a-button class="vid_eaymhbrupq" :type="'primary'" @click="handleAddKeyPoints">
                                <template #icon><PlusOutlined /></template>

                                新增一行关键点
                            </a-button>
                            <a-button type="primary" v-if="!state.isEditTable" @click="handleEditStart" ghost
                                >编辑</a-button
                            >

                            <a-button type="primary" v-else @click="state.isEditTable = false" ghost>完成</a-button>
                        </a-space>
                    </div>
                </div>
                <div class="template-title" v-if="activeKey == '水泥配料项目交付端'">
                    <div><span class="title-font">FAQ列表</span></div>
                    <div style="position: relative; top: -8px">
                        <!-- end vid_hwx83rvzpu 我的 -->
                        <!-- begin vid_eaymhbrupq 审批 -->
                        <a-space>
                            <a-button type="primary" @click="handleCreateClassFy"> 问题归类维护</a-button>
                            <a-button class="vid_eaymhbrupq" :type="'primary'" @click="handleCreateQuestion">
                                <template #icon><PlusOutlined /></template>

                                新增
                            </a-button>
                        </a-space>
                    </div>
                </div>
                <div class="default-table" v-if="activeKey == '水泥配料主要流程与要点'">
                    <a-table
                        :columns="columns1"
                        :data-source="state.dataSource"
                        bordered
                        @resizeColumn="handleTaskResizeColumn"
                        :scroll="{ y: 620 }"
                        :pagination="false"
                        :row-class-name="
                            (_record, index) => (index % 2 === 1 ? 'table-striped-even' : 'table-striped-odd')
                        "
                    >
                        <template #bodyCell="{ record, text, column }">
                            <template v-if="column.dataIndex == 'step'">
                                <div style="text-align: center" class="midllle" @dblclick="changeTable(record)">{{
                                    text
                                }}</div>
                            </template>
                            <template
                                v-if="['主导方', '主导部门'].includes(record.step) && column.dataIndex !== 'step'"
                            >
                                <div class="littel-div" @dblclick="changeTable(record)">
                                    {{ text }}
                                </div>
                            </template>
                            <template
                                v-if="column.dataIndex !== 'step' && !['主导方', '主导部门'].includes(record.step)"
                            >
                                <div class="formatted-text" @dblclick="changeTable(record)">
                                    <a-tooltip
                                        :overlay-style="{
                                            maxWidth: '300px'
                                        }"
                                    >
                                        <template #title>
                                            <p
                                                v-for="(item, index) in handlerGetSpace(text)"
                                                :key="index"
                                                style="margin: 0"
                                                >{{ item }}</p
                                            ></template
                                        >
                                        <span>
                                            {{ text }}
                                        </span>
                                    </a-tooltip>
                                </div>
                            </template>
                        </template>
                    </a-table>
                </div>
                <div class="two-table" v-if="activeKey == '水泥配料项目交付端'">
                    <a-table
                        :columns="columns2"
                        :data-source="state.dataSource2"
                        bordered
                        :scroll="{ y: 630 }"
                        :pagination="false"
                        @resizeColumn="handleTaskResizeColumn"
                        :row-class-name="
                            (_record, index) => (index % 2 === 1 ? 'table-striped-even' : 'table-striped-odd')
                        "
                    >
                        <template #bodyCell="{ record, text, column }">
                            <template v-if="column.dataIndex == 'opration'">
                                <a-space>
                                    <a-button type="link" @click="handleEdit(record)">编辑</a-button>
                                    <a-popconfirm title="确定要删除吗？" @confirm="handleDelete(record)">
                                        <a-button size="small" type="link">删除</a-button>
                                    </a-popconfirm>
                                </a-space>
                            </template>
                        </template>
                    </a-table>
                </div>
            </div>
            <a-modal
                :visible="praiseVisible"
                @cancel="praiseVisible = false"
                width="300px"
                centered
                title="点赞"
                @ok="confirmPraise"
            >
                是否确认为该条FAQ点赞？
            </a-modal>
            <!-- end vid_jk7ozw00gq 自定义模板_r3pn8c4vso -->
        </a-spin>
    </div>
</template>
<script setup lang="tsx">
    import {
        h,
        ref,
        reactive,
        toRaw,
        markRaw,
        watch,
        computed,
        onBeforeMount,
        onMounted,
        onBeforeUnmount,
        onUnmounted,
        onActivated,
        onDeactivated
    } from 'vue'
    import { useRoute, useRouter } from 'vue-router'

    const router = useRouter()
    const route = useRoute()
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
    import {
        cloneDeep,
        localGet,
        merge,
        getDifferenceArray,
        traversalTreeStructure,
        checkCaseCondition,
        renderStringInTemplate,
        handleBreadcrumbJump,
        throttle,
        permission,
        getComponentParamsValue
    } from '@/utils/index'
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is'
    import dayjs from 'dayjs'
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
    import { message, notification, Modal } from 'ant-design-vue'
    import {
        propertyFormatByNumber,
        propertyFormatByPercentage,
        propertyFormatByDate,
        parseSubFromDataList
    } from '@/utils/format'
    import colorTheme from '@/design/custom-theme.json'

    /*** PUBLISH_EXEGESIS ***
 import UserTableRecords from '@/model/UserTableRecords';
 import { getAppBaseUrl } from '@/utils/index';
 import { sendToken } from "@/hooks/useIframeToken";
 import { useSystemStore } from "@/store/modules/system";
 const systemStore = useSystemStore();
 *** PUBLISH_EXEGESIS ***/

    // 获取传入的流程ID和组件参数
    const props = defineProps({
        'processInstanceId': {
            type: [String, Number, Boolean],
            default: undefined
        }
    })
    const immediateWatch = (source, callback) => {
        watch(source, callback, { deep: true, immediate: true })
    }

    /* -------------------------- 属性定义 -------------------------- */

    const setTimeOutList = []
    const pageLoading = reactive({
        loading: false,
        tip: undefined
    })
    const authInfo = localGet('app-user-store')

    // 处理校验
    const setSubFormName = (parentInfo, name) => {
        return [parentInfo.parents, parentInfo.cycleIndex, name]
    }

    /* ========================== 属性定义 ========================== */

    /* -------------------------- 元素数据引用 -------------------------- */

    /* ========================== 元素数据引用 ========================== */

    /* -------------------------- 页面数据 -------------------------- */

    // 页面数据 faq检索-水泥配料
    const dataConnector_conn_bsus0hdxfi_response = ref()
    const dataConnector_conn_bsus0hdxfi = async (additionParams = {}) => {
        const exec = async () => {
            // 获取参数
            const params = {
                pageNo: vid_v8vzkhvbru_props?.rt_tableConfig.pagination.current,
                taskSerialNumber: vid_ejyoc6z715_props?.value,
                pageSize: '10',
                stageSerialNumber: vid_vngjh5r9s3_props?.value,
                templateCode: '11011'
            }

            // 注入附加的参数
            try {
                merge(params, additionParams)
            } catch (error) {
                console.log(error)
            }

            // 判断加载提示

            // 处理URL
            let url = '/solution-ppm/api/v2/built-in-system-ppm/task/faq/search'
            // 替换url中的变量

            // 排除空参数  日期组件重置后的空参数是[null] 或者[undefined]
            Object.keys(params).forEach(key => {
                if (params[key] === null) {
                    delete params[key]
                } else if (Object.prototype.toString.call(params[key]) === '[object Object]') {
                    Object.keys(params[key]).forEach(childKey => {
                        if (
                            params[key][childKey] === null ||
                            (Array.isArray(params[key][childKey]) &&
                                params[key][childKey].length === 1 &&
                                isNullOrUnDef(params[key][childKey]?.[0]))
                        ) {
                            delete params[key][childKey]
                        }
                    })
                }
            })
            return post(url, params, {
                headers: {}
            })
                .then(async resp => {
                    dataConnector_conn_bsus0hdxfi_response.value = resp

                    return resp
                })
                .catch(async e => {
                    return Promise.reject(e)
                })
                .finally(async () => {})
        }

        return await exec()
    }

    // 页面数据 faq数目统计-水泥配料
    const dataConnector_conn_a5p5gzqpej_response = ref()
    const dataConnector_conn_a5p5gzqpej = async (additionParams = {}) => {
        const exec = async () => {
            // 获取参数
            const params = {
                pageNo: null,
                taskSerialNumber: vid_ejyoc6z715_props?.value,
                pageSize: null,
                stageSerialNumber: vid_vngjh5r9s3_props?.value,
                templateCode: '11011'
            }

            // 注入附加的参数
            try {
                merge(params, additionParams)
            } catch (error) {
                console.log(error)
            }

            // 判断加载提示

            // 处理URL
            let url = '/solution-ppm/api/v2/built-in-system-ppm/task/faq/count'
            // 替换url中的变量

            // 排除空参数  日期组件重置后的空参数是[null] 或者[undefined]
            Object.keys(params).forEach(key => {
                if (params[key] === null) {
                    delete params[key]
                } else if (Object.prototype.toString.call(params[key]) === '[object Object]') {
                    Object.keys(params[key]).forEach(childKey => {
                        if (
                            params[key][childKey] === null ||
                            (Array.isArray(params[key][childKey]) &&
                                params[key][childKey].length === 1 &&
                                isNullOrUnDef(params[key][childKey]?.[0]))
                        ) {
                            delete params[key][childKey]
                        }
                    })
                }
            })
            return post(url, params, {
                headers: {}
            })
                .then(async resp => {
                    dataConnector_conn_a5p5gzqpej_response.value = resp

                    return resp
                })
                .catch(async e => {
                    return Promise.reject(e)
                })
                .finally(async () => {})
        }

        return await exec()
    }

    // 页面数据 faq检索-55家
    const dataConnector_conn_w662rqmpgg_response = ref()
    const dataConnector_conn_w662rqmpgg = async (additionParams = {}) => {
        const exec = async () => {
            // 获取参数
            const params = {
                pageNo: vid_udgmsu3n4q_props?.rt_tableConfig.pagination.current,
                taskSerialNumber: vid_ejyoc6z715_props?.value,
                pageSize: null,
                stageSerialNumber: vid_vngjh5r9s3_props?.value,
                templateCode: '11012'
            }

            // 注入附加的参数
            try {
                merge(params, additionParams)
            } catch (error) {
                console.log(error)
            }

            // 判断加载提示

            // 处理URL
            let url = '/solution-ppm/api/v2/built-in-system-ppm/task/faq/search'
            // 替换url中的变量

            // 排除空参数  日期组件重置后的空参数是[null] 或者[undefined]
            Object.keys(params).forEach(key => {
                if (params[key] === null) {
                    delete params[key]
                } else if (Object.prototype.toString.call(params[key]) === '[object Object]') {
                    Object.keys(params[key]).forEach(childKey => {
                        if (
                            params[key][childKey] === null ||
                            (Array.isArray(params[key][childKey]) &&
                                params[key][childKey].length === 1 &&
                                isNullOrUnDef(params[key][childKey]?.[0]))
                        ) {
                            delete params[key][childKey]
                        }
                    })
                }
            })
            return post(url, params, {
                headers: {}
            })
                .then(async resp => {
                    dataConnector_conn_w662rqmpgg_response.value = resp

                    return resp
                })
                .catch(async e => {
                    return Promise.reject(e)
                })
                .finally(async () => {})
        }

        return await exec()
    }

    // 页面数据 faq数目统计-55家
    const dataConnector_conn_u7hg9f4f61_response = ref()
    const dataConnector_conn_u7hg9f4f61 = async (additionParams = {}) => {
        const exec = async () => {
            // 获取参数
            const params = {
                pageNo: null,
                taskSerialNumber: vid_ejyoc6z715_props?.value,
                pageSize: null,
                stageSerialNumber: vid_vngjh5r9s3_props?.value,
                templateCode: '11012'
            }

            // 注入附加的参数
            try {
                merge(params, additionParams)
            } catch (error) {
                console.log(error)
            }

            // 判断加载提示

            // 处理URL
            let url = '/solution-ppm/api/v2/built-in-system-ppm/task/faq/count'
            // 替换url中的变量

            // 排除空参数  日期组件重置后的空参数是[null] 或者[undefined]
            Object.keys(params).forEach(key => {
                if (params[key] === null) {
                    delete params[key]
                } else if (Object.prototype.toString.call(params[key]) === '[object Object]') {
                    Object.keys(params[key]).forEach(childKey => {
                        if (
                            params[key][childKey] === null ||
                            (Array.isArray(params[key][childKey]) &&
                                params[key][childKey].length === 1 &&
                                isNullOrUnDef(params[key][childKey]?.[0]))
                        ) {
                            delete params[key][childKey]
                        }
                    })
                }
            })
            return post(url, params, {
                headers: {}
            })
                .then(async resp => {
                    dataConnector_conn_u7hg9f4f61_response.value = resp

                    return resp
                })
                .catch(async e => {
                    return Promise.reject(e)
                })
                .finally(async () => {})
        }

        return await exec()
    }

    /* ========================== 页面数据 ========================== */

    /* -------------------------- 响应 -------------------------- */

    /* ========================== 响应 ========================== */

    /* -------------------------- 函数 -------------------------- */

    /* ========================== 函数 ========================== */

    /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId
    })

    /* ========================== 页面参数 ========================== */

    /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================

    /* ========================== 组件事件处理方法 ========================== */

    /* -------------------------- 生命周期 -------------------------- */
    // 用于参数变更后重新执行自定义指令
    const queryUpdateFlag = ref(0)
    onMounted(() => {
        dataConnector_conn_bsus0hdxfi()
        dataConnector_conn_a5p5gzqpej()
        dataConnector_conn_w662rqmpgg()
        dataConnector_conn_u7hg9f4f61()
    })

    onUnmounted(() => {
        // 销毁定时器
        setTimeOutList.forEach(({ repeat, timer }) => {
            repeat ? clearInterval(timer) : clearTimeout(timer)
        })
    })

    /* ========================== 生命周期 ========================== */

    /* -------------------------- 数据关联处理 -------------------------- */

    /* -------------------------- 表单数据同步 -------------------------- */
    /* ========================== 表单数据同步 ========================== */

    /* ========================== 数据关联处理 ========================== */

    /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

    /* ========================== 不同组件自定义的处理逻辑 ========================== */

    // ================================定制化逻辑========================================
    const activeKey = ref('FAQ')
    onMounted(() => {
        getData()
        getClassFy()
        getData2()
        getTaskList()
    })
    const state = reactive({
        visible1: false,
        modalTitle1: '',
        dataSource: [],
        dataSource2: [],
        keyPointForm: {
            id: undefined,
            'stockOne': undefined,
            'stockTwo': undefined,
            'metering': undefined,
            'cutting': undefined,
            'cementMill': undefined,
            'resultOne': undefined,
            'resultTwo': undefined,
            'humanFactorOne': undefined,
            'humanFactorTwo': ''
        },
        isEditTable: false,
        questionList: [],
        createList: {
            problemClassifyId: undefined,
            problemHappensName: undefined,
            problemHappensStage: undefined,
            problemHappensNo: undefined,
            faqDeliveryFlowFormList: [],
            problemHappensStageList: []
        },
        classifyVisible: false,
        createVisible: false,
        createTitle: ''
    })
    const classificationItem = {
        problemClassifyName: undefined,
        problemClassifyNo: undefined
    }
    const createItem = {
        'id': undefined,
        'flowLabel': undefined,
        'flowReason': undefined,
        'flowNo': undefined,
        'flowSolution': undefined,
        'flowResponsibleParty': undefined,
        'flowResponsibleDepartment': undefined,
        'flowClassicCase': undefined,
        'problemHappensNo': undefined
    }

    //删除一个模块
    function handlerDeleteFormItem2(index) {
        if (state.createList.faqDeliveryFlowFormList.length == 1) {
            return
        }
        state.createList.faqDeliveryFlowFormList.splice(index, 1)
    }

    // 新插一条模块
    function handlerAddFormItem2(index, type) {
        if (type === '最后') {
            state.createList.faqDeliveryFlowFormList.push({ ...createItem })
        } else {
            // 否则使用 splice 方法在 index 后插入
            state.createList.faqDeliveryFlowFormList.splice(index + 1, 0, { ...createItem })
        }
    }

    //删除一个模块
    function handlerDeleteFormItem1(index) {
        if (state.questionList.length == 1) {
            return
        }
        state.questionList.splice(index, 1)
    }

    // 新插一条模块
    function handlerAddFormItem1(index, type) {
        if (type === '最后') {
            state.questionList.push({ ...classificationItem })
        } else {
            // 否则使用 splice 方法在 index 后插入
            state.questionList.splice(index + 1, 0, { ...classificationItem })
        }
    }

    const columns1 = ref([
        {
            title: '步骤',
            dataIndex: 'step',

            align: 'center',
            resizable: true,
            width: 120,
            customCell: item => {
                const { rowIndex, rowSpan } = item
                return {
                    rowSpan: rowSpan,
                    style: { borderRightColor: '#98B7FC' }
                }
            }
        },
        {
            title: '工艺因素',
            dataIndex: 'taskName',

            resizable: true,
            align: 'center',
            width: 150,
            children: [
                {
                    title: '第1步 备料',
                    dataIndex: '',

                    resizable: true,
                    width: 150,
                    align: 'center',
                    children: [
                        {
                            title: '',
                            dataIndex: 'stockOne',

                            resizable: true,
                            width: 150,
                            align: 'center'
                        },
                        {
                            title: '',
                            dataIndex: 'stockTwo',

                            resizable: true,
                            width: 150,
                            align: 'center'
                        }
                    ]
                },
                {
                    title: '第2步 计量',
                    dataIndex: 'metering',

                    resizable: true,
                    align: 'center',
                    width: 150
                },
                {
                    title: '第3步 下料',
                    dataIndex: 'cutting',

                    resizable: true,
                    align: 'center',
                    width: 150
                },
                {
                    title: '第4步 水泥磨',
                    dataIndex: 'cementMill',

                    resizable: true,
                    align: 'center',
                    width: 150
                },
                {
                    title: '第5步 结果',
                    dataIndex: '',

                    resizable: true,
                    align: 'center',
                    width: 150,
                    children: [
                        {
                            title: '',
                            dataIndex: 'resultOne',

                            resizable: true,
                            width: 150,
                            align: 'center'
                        },
                        {
                            title: '',
                            dataIndex: 'resultTwo',

                            resizable: true,
                            width: 150,
                            align: 'center'
                        }
                    ]
                }
            ]
        },
        {
            title: '人为因素',
            dataIndex: 'taskName',
            resizable: true,
            align: 'center',
            width: 150,
            children: [
                {
                    title: '内容',
                    dataIndex: 'humanFactorOne',

                    resizable: true,
                    align: 'center',
                    width: 150
                },
                {
                    title: '内容',
                    dataIndex: 'humanFactorTwo',

                    resizable: true,
                    align: 'center',
                    width: 150
                }
            ]
        }
    ])
    const columns2 = ref([
        {
            title: '问题归类',
            dataIndex: 'problemClassifyName',
            align: 'center',
            resizable: true,
            width: 180,
            customCell: item => {
                const { aSpan } = item
                return {
                    rowSpan: aSpan
                }
            }
        },
        {
            title: '序号',
            dataIndex: 'problemHappensNo',
            align: 'center',
            resizable: true,
            width: 180,
            customCell: item => {
                const { bSpan } = item
                return {
                    rowSpan: bSpan
                }
            }
        },
        {
            title: '出现问题',
            dataIndex: 'problemHappensName',
            align: 'center',
            resizable: true,
            width: 180,
            customCell: item => {
                const { bSpan } = item
                return {
                    rowSpan: bSpan
                }
            }
        },
        {
            title: '项目阶段',
            dataIndex: 'problemHappensStage',

            align: 'center',
            resizable: true,
            width: 180,
            customCell: item => {
                const { bSpan } = item
                return {
                    rowSpan: bSpan
                }
            }
        },
        {
            title: '原因编号',
            dataIndex: 'flowNo',
            align: 'center',
            resizable: true,
            width: 180
        },
        {
            title: '生产流程标签',
            dataIndex: 'flowLabel',

            align: 'center',
            resizable: true,
            width: 180
        },
        {
            title: '可能原因',
            dataIndex: 'flowReason',
            align: 'center',
            resizable: true,
            width: 180
        },
        {
            title: '解决方案',
            dataIndex: 'flowSolution',

            align: 'center',
            resizable: true,
            width: 180
        },
        {
            title: '主责方',
            dataIndex: 'flowResponsibleParty',

            align: 'center',
            resizable: true,
            width: 180
        },
        {
            title: '主责部门',
            dataIndex: 'flowResponsibleDepartment',

            align: 'center',
            resizable: true,
            width: 180
        },
        {
            title: '典型案例',
            dataIndex: 'flowClassicCase',
            align: 'center',
            resizable: true,
            width: 180
        },
        {
            title: '操作',
            dataIndex: 'opration',

            align: 'center',
            resizable: true,
            width: 180,
            fixed: 'right',
            customCell: item => {
                const { bSpan } = item
                return {
                    rowSpan: bSpan
                }
            }
        }
    ])

    function tabChange() {
        if (activeKey.value == '水泥配料主要流程与要点') {
            getData()
        } else {
            getData2()
            getClassFy()
        }
    }

    function getData2() {
        get('/solution-ppm/api/v2/built-in-system-ppm/task/faq/v2/search').then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            // state.dataSource2 = data.data
            state.dataSource2 = groupData2(data.data)
            console.log(groupData2(data.data))
        })
    }

    const currentData = ref({})
    const faqRef = ref(null)

    function handleAddKeyPoints() {
        state.visible1 = true
        state.modalTitle1 = '新增一行关键点'
        state.keyPointForm = {
            id: undefined,
            'stockOne': undefined,
            'stockTwo': undefined,
            'metering': undefined,
            'cutting': undefined,
            'cementMill': undefined,
            'resultOne': undefined,
            'resultTwo': undefined,
            'humanFactorOne': undefined,
            'humanFactorTwo': ''
        }
    }

    function getData() {
        get('/solution-ppm/api/v2/built-in-system-ppm/flow_key_point').then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            state.dataSource = groupData(data.data)
        })
    }

    function changeTable(record) {
        if (!state.isEditTable) {
            return
        }
        currentData.value = record
        Object.assign(state.keyPointForm, record)
        state.modalTitle1 = `编辑当前${record.step}`
        state.visible1 = true
    }

    function handlerConfirm1() {
        if (currentData.value.id) {
            //   编辑保存
            put(`/solution-ppm/api/v2/built-in-system-ppm/flow_key_point`, state.keyPointForm).then(data => {
                if (data.code === 200) {
                    message.success('修改成功')
                    state.visible1 = false
                    currentData.value = {}
                    resetForm1()
                    getData()
                } else {
                    message.error(data.message)
                }
            })
        } else {
            //   新建保存
            post('/solution-ppm/api/v2/built-in-system-ppm/flow_key_point', state.keyPointForm).then(data => {
                if (data.code === 200) {
                    message.success('新建成功')
                    getData()
                    state.visible1 = false
                    resetForm1()
                    currentData.value = {}
                } else {
                    message.error(data.message)
                }
            })
        }
    }

    function resetForm1() {
        state.keyPointForm = {
            id: undefined,
            'stockOne': undefined,
            'stockTwo': undefined,
            'metering': undefined,
            'cutting': undefined,
            'cementMill': undefined,
            'resultOne': undefined,
            'resultTwo': undefined,
            'humanFactorOne': undefined,
            'humanFactorTwo': ''
        }
    }

    const questionRef = ref(null)
    const createRef = ref(null)

    function groupData(data) {
        let step = ''
        if (!data || !data.length) {
            return []
        }
        return data.map((item, index) => {
            if (step !== item.step) {
                step = item.step
                let rowSpan = 0
                for (let i = 0; i < data.length; i++) {
                    if (i >= index) {
                        if (step === data[i].step) {
                            rowSpan += 1
                        } else {
                            break
                        }
                    }
                }
                item.rowSpan = rowSpan
                item.border = index
            } else {
                item.rowSpan = 0
            }
            item.rowIndex = index
            return item
        })
    }

    function handleTaskResizeColumn(w, col) {
        col.width = w
    }

    function handleEditStart() {
        state.isEditTable = true
    }

    function formatTableData(data) {
        let aSpan = 0
        let bSpan = 0
        let formattedData = []

        // 遍历数组，计算每个aId和bId的行合并情况
        data.forEach((item, index) => {
            // 如果当前是第一个元素或者aId与前一个元素不一样，开始新的aId合并组
            if (index === 0 || item.classifyId !== data[index - 1].classifyId) {
                // 计算该aId的span值（有多少行相同aId）
                aSpan = data.filter(d => d.classifyId === item.classifyId).length
                item.aSpan = aSpan
            } else {
                item.aSpan = 0 // 非第一行，设置为0以隐藏重复行
            }

            // 对于bId相同的情况，判断是否为同一aId组内的bId合并
            if (
                index === 0 ||
                item.happensId !== data[index - 1].happensId ||
                item.classifyId !== data[index - 1].classifyId
            ) {
                // 计算该bId的span值（有多少行相同bId）
                bSpan = data.filter(d => d.classifyId === item.classifyId && d.happensId === item.happensId).length
                item.bSpan = bSpan
            } else {
                item.bSpan = 0 // 非第一行，设置为0以隐藏重复行
            }

            formattedData.push(item)
        })

        return formattedData
    }

    function groupData2(data) {
        let currentClassifyId = ''
        let currenrHappensId = ''

        return data.map((item, index) => {
            if (currentClassifyId !== item.classifyId) {
                currentClassifyId = item.classifyId
                item.aSpan = calculateSpan(data, index, 'classifyId', currentClassifyId)
            } else {
                item.aSpan = 0
            }

            if (currenrHappensId !== item.happensId) {
                currenrHappensId = item.happensId
                item.bSpan = calculateSpan(data, index, 'happensId', currenrHappensId)
            } else {
                item.bSpan = 0
            }

            return item
        })
    }

    function calculateSpan(data, index, property, value) {
        let span = 0
        for (let i = index; i < data.length; i++) {
            if (data[i][property] === value) {
                span += 1
            } else {
                break
            }
        }
        return span
    }

    function handleCreateClassFy() {
        if (state.questionList.length == 0) {
            state.questionList.push({ ...classificationItem })
        }
        state.classifyVisible = true
    }

    function cancalClassFy() {
        state.classifyVisible = false
    }

    function confirmClassFy() {
        createRef.value.validate().then(() => {
            put('/solution-ppm/api/v2/built-in-system-ppm/task/faq/v2/classify/modify', state.questionList).then(
                data => {
                    if (data.code !== 200) {
                        message.error(data.message)
                        return
                    }
                    message.success(data.message)
                    getData2()
                    getClassFy()
                    state.classifyVisible = false
                }
            )
        })
    }

    function handleCreateQuestion() {
        resetAllForm()
        state.createVisible = true
        if (state.createList.faqDeliveryFlowFormList.length == 0) {
            state.createList.faqDeliveryFlowFormList.push({ ...createItem })
        }
        state.createTitle = '新建'
    }

    function cancalQuestion() {
        state.createVisible = false
        resetAllForm()
    }

    const twoState = reactive({
        ClassFyList: []
    })

    function confirmQuestion() {
        questionRef.value.validate().then(() => {
            if (currentQuestion.value.happensId) {
                put('/solution-ppm/api/v2/built-in-system-ppm/task/faq/v2/happens/modify', state.createList).then(
                    data => {
                        if (data.code !== 200) {
                            message.error(data.message)
                            return
                        }
                        message.success(data.message)
                        state.createVisible = false
                        getData2()
                        currentQuestion.value = {}
                        resetAllForm()
                    }
                )
            } else {
                post('/solution-ppm/api/v2/built-in-system-ppm/task/faq/v2/happens/create', state.createList).then(
                    data => {
                        if (data.code !== 200) {
                            message.error(data.message)
                            return
                        }
                        message.success(data.message)
                        state.createVisible = false
                        getData2()
                        resetAllForm()
                        currentQuestion.value = {}
                    }
                )
            }
        })
    }

    function getClassFy() {
        get('/solution-ppm/api/v2/built-in-system-ppm/task/faq/v2/classify/search').then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            twoState.classFyList = data.data.map(item => {
                return {
                    label: item.problemClassifyName,
                    value: item.problemClassifyNo
                }
            })
            state.questionList = data.data
        })
    }

    function handleEdit(record) {
        resetAllForm()
        get(`/solution-ppm/api/v2/built-in-system-ppm/task/faq/v2/happens/${record.happensId}`).then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            state.createList = data.data
            state.createList.faqDeliveryFlowFormList = data.data.faqDeliveryFlowDtoList
            getClassFy()
            state.createVisible = true
            currentQuestion.value = record
            state.createTitle = '编辑'
        })
    }

    const currentQuestion = ref({})

    function handleDelete(record) {
        del(`/solution-ppm/api/v2/built-in-system-ppm/task/faq/v2/happens/${record.happensId}`).then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            message.success(data.message)
            getData2()
        })
    }

    function resetAllForm() {
        state.createList = {
            problemClassifyId: undefined,
            problemHappensName: undefined,
            problemHappensStage: undefined,
            problemHappensNo: undefined,
            faqDeliveryFlowFormList: [],
            problemHappensStageList: []
        }
        currentQuestion.value = {}
    }

    const taskList = ref([])

    function getTaskList() {
        get('/solution-ppm/api/v2/built-in-system-ppm/task/faq/v2/project_stage').then(data => {
            // if (data.code !== 200) {
            console.log('taskList', data)
            taskList.value = data.data.map(item => {
                return {
                    label: item.stageName,
                    value: item.stageName
                }
            })
            // }
        })
    }
    function handlerGetSpace(data) {
        return data ? data.split(/[,，;；\n]/).map(item => item.trim()) : []
    }
    // const FaqRef = ref(null)
    import FaqItem from '../Page3000001016.vue'
</script>
<style lang="less" scoped>
    .page_root {
        width: 100%;
        height: 100%;
        overflow: auto;
    }

    .page_root :deep(.@{ant-prefix}-spin-nested-loading),
    .page_root :deep(.@{ant-prefix}-spin-container) {
        height: 100%;
    }

    .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper) {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
    }

    .page_root :deep(.@{ant-prefix}-table) {
        flex: auto;
        overflow: auto;
    }

    .table-moreBtn_down {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100px;
    }

    .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
        background: #ebf1ff;
    }

    /*  表格树结构样式处理，展开按钮层级增加*/
    :deep(.@{ant-prefix}-table-row-expand-icon) {
        z-index: 1;
    }

    /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
    :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 15px !important;
        width: calc(100% - 15px);
    }

    :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 30px !important;
        width: calc(100% - 30px);
    }

    :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 45px !important;
        width: calc(100% - 45px);
    }

    :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 60px !important;
        width: calc(100% - 60px);
    }

    /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
    :deep(.@{ant-prefix}-transfer-list) {
        height: 100%;
        width: 50%;
    }

    .search-div {
        background-color: #fff;
        margin-bottom: 16px;
        height: 72px;
        padding: 0 20px;
        border-radius: 6px;
    }

    .default-table:deep(.@{ant-prefix}-table-thead) > tr > th {
        background-color: #3875ff;
        color: #fff;
        font-weight: 600;
        padding: 0 16px;
        border-right: 1px solid #d9d9d9;
    }

    .default-table:deep(.@{ant-prefix}-table-tbody) tr > td {
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 400;
        color: #262626;
        padding: 8px 8px;
        border-bottom: 1px solid #d9d9d9;
        word-break: break-all;
    }

    .two-table :deep(.@{ant-prefix}-table-thead) > tr > th {
        background-color: #3875ff;
        color: #fff;
        font-weight: 600;
        padding: 8px 16px;
        border-right: 1px solid #d9d9d9;
    }

    .two-table :deep(.@{ant-prefix}-table-tbody) tr > td {
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 400;
        color: #262626;
        padding: 8px 8px;
        border-bottom: 1px solid #d9d9d9;
        word-break: break-all;
    }

    .kb-page {
        padding: 0 20px 20px 20px;
        height: 100%;
        position: relative;
        background-color: #fff;
        border-radius: 6px;
    }

    .template-title {
        margin-top: 10px;
        padding-left: 8px;
        font-size: 16px;
        height: 16px;
        line-height: 16px;
        border-left: 4px solid #3875ff;
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
    }

    .title-font {
        font-weight: 600;
    }

    .vid_hwx83rvzpu {
        margin-right: 16px;
    }

    .faq-title {
        display: flex;
        width: 100%;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        color: #262626;
        font-weight: 600;
        margin-bottom: 12px;
    }

    .my-page :deep(.ant3-form-item-label) {
        width: 115px;
    }

    .faq-item {
        border: 1px solid #3875ff;
    }

    .faq-item:nth-last-child(-n + 2) {
        border-top: none;
    }

    .sop-img,
    .question-img,
    .reson-img {
        height: 14px;
        width: 14px;
        background-size: cover;
        margin-top: 6px;
        margin-right: 4px;
    }

    .line-box {
        border-top: 1px solid #9bbaff;
        margin-bottom: 10px;
    }

    .fullscreen-animation {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
        z-index: 1000; /* 确保在最上层 */
    }

    .fullscreen-animation img {
        width: 320px;
        height: 320px;
    }

    .page_root {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .body {
        background-color: #fff;
        height: 100%;
        padding: 24px;
        padding-top: 0;
    }

    .form-content {
        display: inline-block;
        width: calc(100% - 80px);
    }

    .del {
        width: 28px;
        color: #3875ff;
        position: absolute;
        right: 35px;
        top: 5px;
    }

    .module-item,
    .module-item-two {
        position: relative;
        width: calc(100% - 60px);
    }

    .add-btn {
        position: absolute;
        right: -35px;
        color: #3875ff;
        top: 5px;
    }

    .default-table:deep(.@{ant-prefix}-table-thead) > tr > th {
        background-color: #3875ff;
        color: #fff;
        font-weight: 600;
        padding: 0 16px;
        border-right: 1px solid #d9d9d9;
    }

    .default-table:deep(.@{ant-prefix}-table-tbody) tr > td {
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 400;
        color: #262626;
        padding: 8px 8px;
        border-bottom: 1px solid #d9d9d9;
        word-break: break-all;
    }

    .inner-div :deep(.ant3-tabs-tab) {
        margin-left: 10px;
    }

    .inner-div :deep(.ant3-tabs-tab-btn) {
        text-align: center;
        width: 68px;
        height: 32px;

        line-height: 32px;
    }

    .inner-div :deep(.ant3-tabs-tab-active) {
        width: 68px;
        height: 32px;
        background: #f0f2f5;
        border-radius: 16px;
        color: #262626;
        line-height: 32px;
        top: 12px;
    }

    .outer :deep(.ant3-tabs-tab-active) {
        width: 68px;
        height: 32px;
        background: #f0f2f5;
        border-radius: 16px;
        color: #262626;
        line-height: 32px;
    }

    .outer :deep(.ant3-tabs-nav-wrap) {
        height: 56px;
    }

    .inner-div :deep(.ant3-tabs-ink-bar) {
        display: none !important;
    }

    .inner-div :deep(.ant3-tabs-tab.ant3-tabs-tab-active .ant3-tabs-tab-btn) {
        color: #262626;
        font-weight: 700;
        background: #f0f2f5;
        border-radius: 16px;
    }

    .tab-div :deep(.ant3-tabs-nav) {
        margin-bottom: 0;
    }

    .one-form :deep(.ant3-form-item-label) {
        width: 115px;
    }

    .one-form {
        height: 480px;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .formatted-text {
        min-height: 20px;
        height: 150px;
        white-space: pre-wrap;
        word-wrap: break-word;
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 7; /* 显示行数 */
        -webkit-box-orient: vertical;
    }

    .form-content {
        display: inline-block;
        width: calc(100% - 80px);
    }

    .bottom-item {
        border: 1px solid #d9d9d9;
        padding: 16px;
        margin-bottom: 16px;
    }

    .module-item-two {
        border-bottom: 1px solid #d9d9d9;
        margin-bottom: 16px;
    }

    .default-table :deep(.table-striped-odd) td {
        background-color: #ffffff;
    }

    .default-table :deep(.table-striped-even) td {
        background-color: #f8fafc;
    }

    .two-table :deep(.table-striped-odd) td {
        background-color: #ffffff;
    }

    .two-table :deep(.table-striped-even) td {
        background-color: #ffffff;
    }

    :deep(.ant3-table.ant3-table-bordered > .ant3-table-container) {
        border-color: #f8fafc;
    }

    .formatted-text {
        text-align: left;
    }

    .default-table :deep(.ant3-table-wrapper) {
        border-bottom: 1px solid #d9d9d9;
    }

    .midllle {
        line-height: 40px;
        height: 40;
    }

    .littel-div {
        height: 40px;
        line-height: 40px;
    }
</style>
